<template>
    <div class="import-maintain-standard-wrap">
        <el-form label-width="140px" :model="importMaintainStandardForm" :rules="importMaintainStandardFormRules" ref="importMaintainStandardForm" @submit.native.prevent>
            <el-form-item label="维保标准名称：" prop="maintainStandardName">
                <el-input v-model="importMaintainStandardForm.maintainStandardName" auto-complete="off" placeholder="请输入维保标准名称"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input v-model="importMaintainStandardForm.remark" auto-complete="off" placeholder="请输入维保标准名称"></el-input>
            </el-form-item>
            <el-form-item label="上传文件：" prop="excelfile">
                <el-upload
                    class="upload-asset"
                    ref="upload"
                    drag
                    name="excelfile"
                    accept=".xls,.xlsx"
                    :data="importMaintainStandardForm"
                    :action="actionUrl"
                    :before-upload="beforeUpload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :on-change="handleChange"
                    :file-list="fileList"
                    :auto-upload="false"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">*只能上传xls/xlsx文件</div>
                </el-upload>
            </el-form-item>
            <el-row class="download-temp-wrap">
                <span>请使用模板来上传你要添加的维保标准</span><a :href="downloadTempUrl">下载模板</a>
            </el-row>
            <el-form-item label-width="0" class="verifyidentity-button">
                <el-button @click.stop="closeDialogFun">取消</el-button>
                <el-button type="primary" @click="submitUpload">开始上传</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { exportMaintainStandard } from '@/api/maintence'

export default {
    name: 'ImportMaintainStandard',
    props: {
        maintainStandardOptions: {
            type: Array,
            required: true
        },
        closeDialogFun: {
            type: Function,
            required: true
        }
    },
    data() {
        var checkMaintainStandardName = (rule, value, callback) => {
            if(value) {
                if (!this.checkNameRepeat(value)) {
                    callback(new Error('该名称已存在'))
                } else {
                    callback()
                }
            } else {
                callback(new Error('请输入维保标准名称'))
            }
        }
        var checkExcelfile = (rule, value, callback) => {
            if (this.fileList.length < 1) {
                callback(new Error('请选择要上传的文件'))
            } else {
                callback()
            }
        }
        return {
            fileList: [],
            actionUrl: this.GLOBAL.baseURL + 'maintain/importMaintainStandard',
            downloadTempUrl: this.GLOBAL.baseURL + 'maintain/downMainStandardTemplate',
            importMaintainStandardForm: {
                maintainStandardName: '',
                remark: ''
            },
            importMaintainStandardFormRules: {
                maintainStandardName: [
                    { required: true, validator: checkMaintainStandardName, trigger: 'blur' }
                ],
                excelfile: [
                    { required: true, validator: checkExcelfile, trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        checkNameRepeat(name) {
            let maintainStandardOptions = this.maintainStandardOptions
            if (name) {
                for(var i=0, len=maintainStandardOptions.length; i<len; i++) {
                    if(name === maintainStandardOptions[i].name) {
                        return false
                    }
                }
                return true
            }
        },
        submitUpload() {
            let that = this
            that.$refs['importMaintainStandardForm'].validate((valid) => {
                if (valid) {
                    that.$refs.upload.submit()
                } else {
                    return false
                }
            })
        },
        beforeUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)				
            const isXSL = testmsg === 'xls'
            const isXLSX = testmsg === 'xlsx'
            if (!isXSL && !isXLSX) {
                this.$message({
                message: '上传文件只能是 xls、xlsx格式!',
                type: 'warning'
                });
                return false;
            }
        },
        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        handlePreview(file) {
            // console.log(file)
        },
        handleSuccess(res) {
            if(res.status === 200) {
                this.$message.success("文件上传成功！")
            } else {
                this.$message.warning(res.info)
            }
            this.closeDialogFun(true)
        },
        handleError(err, file, fileList) {
            this.$message.error("文件上传失败！");
        },
        handleChange(file, fileList) {
            this.fileList = fileList
        }
    }
}
</script>
<style lang="scss">
.import-maintain-standard-wrap {
    .upload-asset {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .download-temp-wrap {
        margin-top: 20px;
        padding: 0 20px;
        line-height: 40px;
        background-color: #E6E6E6;
        a {
            float: right;
        }
    }
    .verifyidentity-button {
        margin-top: 20px;
    }
}
</style>
